<template>
    <div class="flap-card-wrapper" >
        <div class="book-card">
            <div class="book-card-wrapper">
                <div class="img-wrapper">
                    <img class="img" v-lazy="data.cover">
                </div>
                <div class="content-wrapper">
                    <div class="title">{{data.title}}</div>
                    <div class="author sub-title-medium">{{data.author}}</div>
                    <div class="category">{{categoryText()}}</div>
                </div>
                <div class="read-btn" @click.stop="showBookDetail(data)">{{$t('home.readNow')}}</div>
            </div>
        </div>
        <div class="close-btn-wrapper" @click ='close()'>
            <span class='icon-close'></span>
        </div>

    </div>
</template>

<script type="text/ecmascript-6">
  import { storeHomeMixin } from '@/utils/mixin'
  import  { categoryText} from "../utils/store";

  export default {
      mixins:[storeHomeMixin],
      props:{
          data:Object
      },
      data(){
        return {
            ifShowBookCard: false,
            runBookCardAnimation:true


        }
      },
      methods:{
          close() {
              this.$emit('close')
          },
          showBookCard() {
              this.ifShowBookCard = true
              this.runBookCardAnimation = true
              this.ifShowFlapCard = false
              this.ifShowPoint = false
          },
          categoryText() {
              if(this.data){
                  return categoryText(this.data.category,this)
              }else{
                  return ''
              }

          }
      },
      mounted() {
          console.log(this.data)
      }
  }
</script>

<style lang='scss' scoped>
    @import '../assets/styles/global.scss';
    .flap-card-wrapper{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        .close-btn-wrapper {
            position: absolute;
            left: 0;
            bottom: px2rem(90);
            z-index:1100;
            width:100%;
            @include center;
            .icon-close {
                width: px2rem(90);
                height: px2rem(90);
                border-radius: 50%;
                background: #333;
                color: white;
                @include center;
            }

        }
    .book-card {
        position: relative;
        width: 600px;
        box-sizing: border-box;
        border-radius: px2rem(15);
        background: white;
        &.animation {
             animation: scale 0.3s ease-in both;
        @keyframes scale {
            0% {
                transform: scale(0);
                opacity: 0;
            }
            100% {
                transform: scale(1);
                opacity: 1;
            }
        }
        }
    .book-card-wrapper {
        width: 100%;
        height: 100%;
        margin-bottom: px2rem(30);
        @include columnTop;
    .img-wrapper {
        width: 100%;
        margin-top: px2rem(40);
        @include center;
        .img {
            width: px2rem(180);
            height: px2rem(260);
        }
    }
    .content-wrapper {
        padding: 0 px2rem(40);
        margin-top: px2rem(40);
    .title {
        color: #333;
        font-weight: bold;
        font-size: px2rem(50);
        line-height: px2rem(60);
        max-height: px2rem(80);
        text-align: center;
    @include ellipsis2(2)
    }
    .author {
        line-height: px2rem(40);
        font-size:px2rem(40);
        max-height: px2rem(40);
        color: #666;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        word-break: keep-all;
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        overflow-wrap: break-word;
        margin-top: px2rem(10);
        text-align: center;
    }
    .category {
        color: #999;
        font-size: px2rem(35);
        margin-top: px2rem(40);
        text-align: center;
    }
    }
    .read-btn {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 1100;
        width: 100%;
        border-radius: 0 0 px2rem(15) px2rem(15);
        padding: px2rem(30) 0;
        text-align: center;
        color: white;
        font-size: px2rem(30);
        background: #4aabff;
    }
    }
    }



    }

</style>
